<template>
  <div class="body-bg">
    <!-- 头部 -->
    <header-module :title="'服务区智慧厕所系统'" :originName="'toilet'"  :ab-items="abItems"></header-module>
    <div class="content">
      <!-- 固定在左上角的综合选择区域 -->
      <div class="fixed-left">
        <div class="yz-select-server">
          <div class="yz-box-items">
            <div class="yz-box-item" v-for="(item,index) in abItems" @click="abClick(index)">
              <div v-if="item.selected" class="yz-box-item-text yx-box-item-selected">{{item.name}}</div>
              <div v-else class="yz-box-item-text">{{item.name}}</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 左边 -->
      <div class="content_info left-content" :class="{ 'swap-left': shouldSwap }">
        <div class="content_info_item">
          <contentTitle :title="'男厕'"/>
          <div class="body-box-bg">
            <div class="toilet-main">
              <div class="toilet-item5">
                <div class="toilet-top">
                  <div class="man"></div>
                  <div class="toilet-rates" style="margin-left: 20px;">
                    <div class="toilet-p">{{manflow.count}}</div>
                    <div class="toilet-rate">今日客流</div>
                  </div>
                </div>
                <div class="toilet-bottom">
                  <div class="toilet-line">空气质量<span class="b">{{mankqzl}}</span></div>
                </div>
              </div>
              <div class="toilet-item5">
                <div ref="zcwRef" class="chart"></div>
              </div>
            </div>
          </div>
        </div>

        <div class="content_info_item">
          <contentTitle :title="'环境监测'"/>
          <div class="body-box-bg">
            <div class="toilet-items">
              <div class="toilet-item" v-for="(item,index) in envList">
                <div class="toilet-item-main" v-if="item.showFlag === true || !item.hasOwnProperty('showFlag')">
                  <div class="toilet-img">
                    <div :class="item.clazz"></div>
                  </div>
                  <div class="toilet-icon-text" v-if="item.clazz != 'fskz'">
                    <div class="toilet-icon-text-value">{{item.value}}</div>
                    <div class="toilet-icon-text-zh">{{item.label}}</div>
                  </div>
                  <div class="toilet-icon-text" v-else>
                    <div class="toilet-controller">
                      <div class="yz-box-items yz-box-items-small">
                        <div class="yz-box-item" v-for="(item,index) in fsItems" @click="fsManItemClick(index)">
                          <div v-if="item.selected" class="yz-box-item-text yx-box-item-selected">{{item.name}}</div>
                          <div v-else class="yz-box-item-text">{{item.name}}</div>
                        </div>
                      </div>
                    </div>
                    <div class="toilet-icon-text-zh">{{item.label}}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="content_info_item">
          <contentTitle :title="'客流对比'"/>
          <div class="body-box-bg">
            <div class="yz-common-small-title">
              <div class="yz-common-title-navs top2">
                <div :class="['yz-common-title-nav',{'selected':item.selected}]" v-for="(item,index) in kldb_navs" @click="kldbClick(index)">
                  <span>{{ item.name }}</span>
                </div>
              </div>
            </div>
            <div ref="kldb1Ref" class="chart"></div>
          </div>
        </div>
      </div>
      <!-- 中间 -->
      <div class="content_map">
        <div class="yz-map-header">
          <div class="car_flow blueNum">
            <div class="car_flow_text">{{ carFlowOptions.carFlowText }}</div>
            <div class="car_flow_num">
              <div class="perNum" v-for="(item,index) in carFlowOptions.carFlowNum">
                <!-- 有背景图，然后把数字拆分  -->
                <countTo :startVal='0' :endVal='item||0' :duration='5000'></countTo>
              </div>
            </div>
            <div class="car_flow_unit">人</div>
          </div>
        </div>
        <div class="svg-content">
          <!-- <img :src="showSvg" alt="中间" /> -->
          <ToiletAreaASvg v-if="isAreaA" @dataLoaded="handleDataLoadedA"/>
          <ToiletAreaBSvg v-if="!isAreaA" @dataLoaded="handleDataLoadedB"/>
        </div>
      </div>
      <!-- 右边 -->
      <div class="content_info right-content" :class="{ 'swap-right': shouldSwap }">
        <div class="content_info_item">
          <contentTitle :title="'女厕'"/>
          <div class="body-box-bg">
            <div class="toilet-main">
              <div class="toilet-item5">
                <div ref="zcwRightRef" class="chart"></div>
              </div>
              <div class="toilet-item5">
                <div class="toilet-top">
                  <div class="toilet-rates" style="margin-right: 20px;">
                    <div class="toilet-p">{{womenflow.count}}</div>
                    <div class="toilet-rate">今日客流</div>
                  </div>
                  <div class="women"></div>
                </div>
                <div class="toilet-bottom">
                  <div class="toilet-line"><span class="b">{{womenkqzl}}</span>空气质量</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="content_info_item">
          <contentTitle :title="'环境监测'"/>
          <div class="body-box-bg">
            <div class="toilet-items">
              <div class="toilet-item" v-for="(item,index) in env2List">
                <div class="toilet-item-main" v-if="item.showFlag === true || !item.hasOwnProperty('showFlag')">
                  <div class="toilet-img">
                    <div :class="item.clazz"></div>
                  </div>
                  <div class="toilet-icon-text"  v-if="item.clazz != 'fskz'">
                    <div class="toilet-icon-text-value">{{item.value}}</div>
                    <div class="toilet-icon-text-zh">{{item.label}}</div>
                  </div>
                  <div class="toilet-icon-text" v-else>
                    <div class="toilet-controller">
                      <div class="yz-box-items yz-box-items-small">
                        <div class="yz-box-item" v-for="(item,index) in fs2Items" @click="fsWomenItemClick(index)">
                          <div v-if="item.selected" class="yz-box-item-text yx-box-item-selected">{{item.name}}</div>
                          <div v-else class="yz-box-item-text">{{item.name}}</div>
                        </div>
                      </div>
                    </div>
                    <div class="toilet-icon-text-zh">{{item.label}}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="content_info_item">
          <contentTitle :title="'客流对比'"/>
          <div class="body-box-bg">
            <div class="yz-common-small-title">
              <div class="yz-common-title-navs top2">
                <div :class="['yz-common-title-nav',{'selected':item.selected}]" v-for="(item,index) in kldb2_navs" @click="kldb2Click(index)">
                  <span>{{ item.name }}</span>
                </div>
              </div>
            </div>
            <div ref="kldb2Ref" class="chart"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 底部菜单 -->
  <fwq-bottom-menu></fwq-bottom-menu>
</template>
<script setup>
import './../assets/content.css'
import 'dayjs/locale/zh-cn';
import {getCurrentInstance, onMounted, ref,watch,onUnmounted, computed } from "vue";
import HeaderModule from "./components/headerModule.vue";
import ToiletAreaASvg from "./components/toilet/toiletAreaASvg.vue";
import ToiletAreaBSvg from "./components/toilet/toiletAreaBSvg.vue";
import svg1 from '../assets/img/toilet/厕所图.svg';
import svg2 from '../assets/img/public/bodyModule/车位图2.svg';
import ContentTitle from "./components/contentTitle.vue";
import {CountTo} from "vue3-count-to";
import {drawLine} from "../util/chartUtil.js";
import FwqBottomMenu from "./components/fwqBottomMenu.vue";
import {ajaxRequest} from "../api/code.js";
import $ from 'jquery';
const chart = getCurrentInstance().proxy.$echarts
const isAreaA = ref(false)

const fsItems = ref([{
  name:'开',
  selected: false
},{
  name:'关',
  selected: false
},{
  name:'自动',
  selected: true
}])
const fs2Items = ref([{
  name:'开',
  selected: false
},{
  name:'关',
  selected: false
},{
  name:'自动',
  selected: true
}])
const fsManItemClick = function (selectIndex){
  let selectValue;
  fsItems.value.forEach((row, index) => {
    if (index === selectIndex){
      row.selected = true;
      if (row.name !== '自动'){
          //0=关 1=开 2=自动
        swithcnFan('man',row.name=='关'?0:1)
        envList.value[4].value = row.name;
      }else{
        swithcnFan('man',2)
      }
    }else{
      row.selected = false
    }
  });
  setTimeout(getToiletStatus, 15000);
}
const fsWomenItemClick = function (selectIndex){
  let selectValue;
  fs2Items.value.forEach((row, index) => {
    if (index === selectIndex){
      row.selected = true;
      if (row.name !== '自动'){
          //0=关 1=开 2=自动
        swithcnFan('women',row.name=='关'?0:1)
        env2List.value[4].value = row.name;
      }else{
        swithcnFan('women',2)
      }
    }else{
      row.selected = false
    }
  });
  //15后获取最新风扇状态
  setTimeout(getToiletStatus, 15000);
}
//ab选择
let showSvg = svg1;
const abItems = ref([{
  name:"南区",
  selected: true
},{
  name:"北区",
  selected: false
}]);

//综合切换事件
const abClick = function (selectIndex) {
  abItems.value.forEach((row, index) => {
    row.selected = (index === selectIndex);
  });
  if (selectIndex === 0){
    showSvg = svg1;
    switchArea("A")
  }else{
    showSvg = svg2;
    switchArea("B")
  }
  setToiletFanShow()
}
function initArea(){
  abItems.value.forEach((row, index) => {
    if( row.selected ){//南区
      if(index==0){
        switchArea("A")
      }else{
        switchArea("B")
      }
    }
  });
}
/* 中间车流量统计 */
const carFlowZoneOptions = ref([{name: '外场',selected:true}, {name: '内场',selected: false}])
const carFlowOptions = ref({
  carFlowText: "今日总客流量",
  carFlowNum: "0"
})
const manflow = ref({
  count: 1234,
  increase: 10
})
const womenflow = ref({
  count: 1234,
  increase: 10
})
const womenkqzl = ref('优')
const mankqzl = ref('优')
/* 左边 */
/* 总厕位 */

let datas = {
  name:"总厕位",
  stopValue: 10,
  totalValue: 50
}
const seriesData = ref([]);
let percent = datas.stopValue*40/datas.totalValue; //百分比
let _colors = ['rgba(65,130,247,0.53)', '#4182F7'];
let colors = [];
const ratio = Math.floor(percent / 2);
for (let i = 0; i < 20; i++) {
  if (i < ratio) {
    colors.push(_colors[0])
  } else {
    colors.push(_colors[1])
  }
}
for (let i = 0; i < 20; i++) {
  seriesData.value.push({
    value: 0,
    name: 'aa',
    itemStyle: {
      normal: {
        color: {
          type: 'radial',
          x: 0.5,
          y: 0.5,
          r: 0.5,
          colorStops: [{
            offset: 0, color: '#4182F7' // 0% 处的颜色
          }, {
            offset: 1, color: '#41EFF2' // 100% 处的颜色
          }],
          global: false // 缺省为 false
        },
        borderWidth: 5,
        borderColor: colors[i],
        shadowBlur: 5,
        shadowColor: '#000',
        shadowOffsetX: 2,
        shadowOffsetY: 2
      }
    }
  }, {
    value: 20,
    name: '',
    itemStyle: {
      normal: {
        label: {
          show: false
        },
        labelLine: {
          show: false
        },
        color: 'transparent',
        borderColor: 'transparent',
        borderWidth: 0
      }
    }
  });
}
const zcwRef = ref();
const zcwOpt = ref({
  title: {
    text: '总厕位：' + datas.totalValue,
    left: 'center',
    bottom: '0%',
    textStyle: {
      color: '#FFFFFF',
      fontSize: 16,
    },
  },
  series: [{
    name: '',
    type: 'pie',
    radius: [40, 50],
    hoverAnimation: false,
    itemStyle: {
      normal: {
        label: {
          show: false
        },
      }
    },
    data: seriesData.value
  }],
  graphic: [
    {
      type: 'text',
      left: 'center',
      top: 'middle',
      style: {
        text: datas.stopValue+'\n未使用',
        textAlign: 'center',
        fill: '#FFFFFF',
        font: 'bolder 14px sans-serif',
        lineHeight: 20
      }
    }
  ]
})


//女厕

let datas2 = {
  name:"总厕位",
  stopValue: 10,
  totalValue: 50
}
const seriesData2 = ref([]);
percent = datas2.stopValue*40/datas2.totalValue; //百分比
_colors = ['rgba(242,65,71,0.6)', '#f24147'];
colors = [];
const ratio2 = Math.floor(percent / 2);
for (let i = 0; i < 20; i++) {
  if (i < ratio2) {
    colors.push(_colors[0])
  } else {
    colors.push(_colors[1])
  }
}
for (let i = 0; i < 20; i++) {
  seriesData2.value.push({
    value: 0,
    name: 'aa',
    itemStyle: {
      normal: {
        color: {
          type: 'radial',
          x: 0.5,
          y: 0.5,
          r: 0.5,
          colorStops: [{
            offset: 0, color: '#4182F7' // 0% 处的颜色
          }, {
            offset: 1, color: '#41EFF2' // 100% 处的颜色
          }],
          global: false // 缺省为 false
        },
        borderWidth: 5,
        borderColor: colors[i],
        shadowBlur: 5,
        shadowColor: '#000',
        shadowOffsetX: 2,
        shadowOffsetY: 2
      }
    }
  }, {
    value: 20,
    name: '',
    itemStyle: {
      normal: {
        label: {
          show: false
        },
        labelLine: {
          show: false
        },
        color: 'transparent',
        borderColor: 'transparent',
        borderWidth: 0
      }
    }
  });
}
const zcwRightRef = ref();
const zcwRightOpt = ref({
  title: {
    text: '总厕位：'+ datas2.totalValue,
    left: 'center',
    bottom: '0%',
    textStyle: {
      color: '#FFFFFF',
      fontSize: 16,
    },
  },
  series: [{
    name: '',
    type: 'pie',
    radius: [40, 50],
    hoverAnimation: false,
    itemStyle: {
      normal: {
        label: {
          show: false
        },
      }
    },
    data: seriesData2.value
  }],
  graphic: [
    {
      type: 'text',
      left: 'center',
      top: 'middle',
      style: {
        text: datas2.stopValue+'\n未使用',
        textAlign: 'center',
        fill: '#FFFFFF',
        font: 'bolder 14px sans-serif',
        lineHeight: 20
      }
    }
  ]
});



/* 环境监测 */
const envList = ref([
  {
    clazz:'wd',
    value:'26.00℃',
    label:'温度'
  },
  {
    clazz:'sd',
    value:'72.10%',
    label:'湿度'
  },
  {
    clazz:'voc',
    value:'7%',
    label:'气味浓度'
  },
  {
    clazz:'qz',
    value:'',
    label:'充足'
  },
  {
    clazz:'fs',
    value:'关',
    label:'风扇状态'
  },
  {
    clazz:'fskz',
    value:'',
    label:'风扇控制'
  }
])

const env2List = ref([
  {
    clazz:'wd',
    value:'27.00℃',
    label:'温度'
  },
  {
    clazz:'sd',
    value:'70.80%',
    label:'湿度'
  },
  {
    clazz:'voc',
    value:'7%',
    label:'气味浓度'
  },
  {
    clazz:'qz',
    value:'',
    label:'充足'
  },
  {
    clazz:'fs',
    value:'关',
    label:'风扇状态'
  },
  {
    clazz:'fskz',
    value:'',
    label:'风扇控制'
  }
])

/* 客流对比左边 */
const kldb_x = ref(["00:00","03:00","06:00","09:00","12:00","15:00","18:00","21:00"])
const kldb_y = ref([140, 232, 101, 264, 90, 340, 250, 101])
const kldb_navs = ref([{name:'日',selected:false},{name:'月',selected:true},{name:'年',selected:false}])

const kldbClick = function (selectIndex){
  kldb_navs.value.forEach((row,index)=>{
    row.selected = (index === selectIndex);
  });
  manPassengerRef.value.timeType=selectIndex+1
  let typeval = manPassengerRef.value.timeType
  if (typeval == 1) {
    getDtData(0)
  } else if (typeval == 2) {
    getBydData(0)
  } else if (typeval == 3) {
    getBndData(0)
  }
}

const kldb1Ref = ref();
const kldbOpt = ref({
  color: ['#5AFFFA'],
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: '',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  grid: {
    top: '25%',
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: kldb_x.value,
      axisLine: { // 设置轴线样式
        lineStyle: {
          color: 'white' // 设置轴线颜色
        }
      },
      axisTick:{
        show: false
      },
      axisLabel: {
        interval:1,
        textStyle: {
          color: 'white',
          fontSize: 12
        }
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: "（人）",
      nameTextStyle: {
        color: "#FFF",
        nameLocation: "end",
        padding:[0,0,0,-15]
      },
      axisLabel: {
        textStyle: {
          color: 'white'
        }
      },
      axisLine: { // 设置轴线样式
        lineStyle: {
          color: 'white' // 设置轴线颜色
        }
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(127, 127, 127, 1)',
          type: 'dashed',
        }
      },
    }
  ],
  series: [
    {
      name: "",
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 4
      },
      showSymbol: true,
      emphasis: {
        focus: 'series'
      },
      areaStyle: {
        opacity: 0.8,
        color: new chart.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(90,255,250,0.8)'
          },
          {
            offset: 1,
            color: 'rgb(1, 191, 236, 0.1)'
          }
        ])
      },
      data: kldb_y.value
    }
  ]
});

/* 客流对比 右边 */
const kldb2_x = ref(["00:00","03:00","06:00","09:00","12:00","15:00","18:00","21:00"])
const kldb2_y = ref([140, 232, 101, 264, 90, 340, 250, 101])
const kldb2_navs = ref([{name:'日',selected:false},{name:'月',selected:true},{name:'年',selected:false}])
const kldb2Click = function (selectIndex){
  kldb2_navs.value.forEach((row,index)=>{
    row.selected = (index === selectIndex);
  });
  womenPassengerRef.value.timeType=selectIndex+1
  let typeval = womenPassengerRef.value.timeType
  if (typeval == 1) {
    getDtData(1)
  } else if (typeval == 2) {
    getBydData(1)
  } else if (typeval == 3) {
    getBndData(1)
  }
}

const kldb2Ref = ref();
const kldb2Opt = ref({
  color: ['#991930'],
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: '',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  grid: {
    top: '25%',
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: kldb_x.value,
      axisLine: { // 设置轴线样式
        lineStyle: {
          color: 'white' // 设置轴线颜色
        }
      },
      axisTick:{
        show: false
      },
      axisLabel: {
        interval:0,
        textStyle: {
          color: 'white',
          fontSize: 12
        }
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: "（人）",
      nameTextStyle: {
        color: "#FFF",
        nameLocation: "end",
        padding:[0,0,0,-15]
      },
      axisLabel: {
        textStyle: {
          color: 'white'
        }
      },
      axisLine: { // 设置轴线样式
        lineStyle: {
          color: 'white' // 设置轴线颜色
        }
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(127, 127, 127, 1)',
          type: 'dashed',
        }
      },
    }
  ],
  series: [
    {
      name: "",
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 4
      },
      showSymbol: true,
      emphasis: {
        focus: 'series'
      },
      areaStyle: {
        opacity: 0.8,
        color: new chart.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(90,255,250,0.8)'
          },
          {
            offset: 1,
            color: 'rgb(1, 191, 236, 0.1)'
          }
        ])
      },
      data: kldb_y.value
    }
  ]
});
let kldb1Chart, kldb2Chart, zcwChart, zcwRightChart
onMounted(() => {

  kldb1Chart = drawLine(kldb1Ref.value,kldbOpt.value);//左边客流对比
  kldb2Chart = drawLine(kldb2Ref.value,kldb2Opt.value);//左边客流对比
  zcwChart = drawLine(zcwRef.value,zcwOpt.value);
  zcwRightChart = drawLine(zcwRightRef.value,zcwRightOpt.value) //女厕
  initData()
})
//--------------------------获取后端数据
const manPassengerRef = ref({timeType:2})
const womenPassengerRef = ref({timeType:2})
const centerRef = ref(null)
const field = ref('outField') // 场内/场外
const area = ref('B') // 东(南)/西(北)/综合
const areaId = ref('1177351') // 东(南)/西(北)/综合
let timer = null
let timerYM = null
let timer10 = null
// 刷新页面数据
watch([area], (newVal, oldVal) => {
  if (timer) clearInterval(timer)
  if (timerYM) clearInterval(timerYM)
  if (timer10) clearInterval(timer10)
  initData()
})
onUnmounted(() => {
  if (timer) clearInterval(timer)
  if (timerYM) clearInterval(timerYM)
  if (timer10) clearInterval(timer10)
});

const initData = () => {
  //getKqzlData()
  initArea()
  getDtcssyData(3)
  getDtklzbData(3)
  refreshData()
 // getBydData(3)
  getManPassengerData()
  getWomenPassengerData()
  getEnvData();
  getToiletStatus();
  getToiletPapermStatus();
  // getStatoiletseatData(area.value=='A'?'01':'02')
}

// 1分钟刷新
const refreshData = () => {
  timer = setInterval(async () => {
   // getKqzlData(3)
    getDtcssyData(3)
    // getEnvData();
    // getToiletStatus();
    // getToiletPapermStatus();
    getDtklzbData(3)
    getManPassengerData()
    getWomenPassengerData()
    // getStatoiletseatData(area.value=='A'?'01':'02')
  }, 60*1000)
  timer10 = setInterval(async () => {
    getEnvData();
    getToiletStatus();
    getToiletPapermStatus();
    getStatoiletseatData(area.value=='A'?'01':'02')
  }, 10*1000)
}
async function getKqzlData() {
  const params = {
    compId: "",
    areaId: areaId.value
  }
  ajaxRequest('post', 'getKqzlData', params).then(res => {
    if (res.rows && res.rows.length > 0) {
          res.rows.forEach(function (item) {
            if (item.type == 0) {
              env1List.value[0].value = item.temperature+"°C"
              env1List.value[1].value = item.humidity+"%"
              env1List.value[2].value = item.odorconcentration+"ug/㎡"
              env1List.value[3].label= item.paperstatus==1?'有纸':'充足'
              if (env1List.value[2].value <= 50) {
                mankqzl.value = "优1";
              }
              else if (env1List.value[2].value > 50 && env1List.value[2].value <= 100) {
                mankqzl.value = "良";
              }
              else if (env1List.value[2].value > 100) {
                mankqzl.value = "差";
              }
            } else {
              env2List.value[0].value = item.temperature+"°C"
              env2List.value[1].value = item.humidity+"%"
              env2List.value[2].value = item.odorconcentration+"ug/㎡"
              env2List.value[3].label= item.paperstatus==1?'有纸':'充足'
              if (env2List.value[2].value  <0.8 ) {
                womenkqzl.value = "优";
              }
              else if (env2List.value[2].value >=0.8 && env2List.value[2].value < 2.0) {
                womenkqzl.value = "良";
              }
              else if (env2List.value[2].value >=2.0) {
                womenkqzl.value = "差";
              }
            }

          });
    }
  })
}


async function getManPassengerData() {
  for (let index = 0; index <  kldb_navs.value.length; index++) {
    if(kldb_navs.value[index].selected==true){
      manPassengerRef.value.timeType=index+1
    }
  }
  let typeval = manPassengerRef.value.timeType
  console.info(typeval)
  if (typeval == 1) {
    getDtData(0)
  } else if (typeval == 2) {
    getBydData(0)
  } else if (typeval == 3) {
    getBndData(0)
  }
}
// 获取客流数据
async function getWomenPassengerData() {
  for (let index = 0; index <  kldb2_navs.value.length; index++) {
    if(kldb2_navs.value[index].selected==true){
      womenPassengerRef.value.timeType=index+1
    }
  }

  let typeval = womenPassengerRef.value.timeType
  console.info(typeval)
  // debugger
  if (typeval == 1) {
    getDtData(1)
  } else if (typeval == 2) {
    getBydData(1)
  } else if (typeval == 3) {
    getBndData(1)
  }
}
const handleContent = () => {
  isInitAnimated.value = true
  footerShow.value = !footerShow.value
}

const switchArea = (val) => {
  area.value = val
  if("A" == val){
    isAreaA.value = true
    areaId.value ="1177350";
    getStatoiletseatData('01')
  } else if("B"== val){
    isAreaA.value = false
    areaId.value ="1177351";
    getStatoiletseatData('02')
  } else{
    isAreaA.value = true
    areaId.value ="";
    getStatoiletseatData('01')
  }
  
}

const switchField = (val) => {
  field.value = val
}

const handleCenter = () => {
  let areacode = "01"
  if("1177351" == areaId.value){
    areacode = "02"
  }
  // centerRef.value.handleModel(true,areacode)
}


async function getBndData(type) {
  if (type == 0) {
    kldb_y.value=[]
    kldb_x.value=['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
  }else if (type == 1) {
    kldb2_y.value=[]
    kldb2_x.value=['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
  }else{
    kldb_x.value=['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    kldb2_x.value=['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    kldb_y.value=[]
    kldb2_y.value=[]
  }
  const params = { compId: "", areaId: areaId.value }
  ajaxRequest('post', 'getBndData', params).then(res => {
    if (type == 0) {
      kldb_y.value = []//getListCurMonth()
      res.rows.forEach(item => {
          kldb_y.value[item.month - 1] = item.genderg1
      })
      kldbOpt.value.xAxis[0].data = kldb_x.value
      kldbOpt.value.xAxis[0].axisLabel.interval=0;
      kldbOpt.value.series[0].data = kldb_y.value
      kldb1Chart.setOption(kldbOpt.value)
    } else if (type == 1) {
      kldb2_y.value = []//getListCurMonth()
      res.rows.forEach(item => {kldbOpt
          kldb2_y.value[item.month - 1] = item.genderg2  
      })
      kldb2Opt.value.xAxis[0].data = kldb2_x.value
      kldb2Opt.value.xAxis[0].axisLabel.interval=0;
      kldb2Opt.value.series[0].data = kldb2_y.value
      kldb2Chart.setOption(kldb2Opt.value)
    } else {
      kldb_y.value = []//getListCurMonth()
      kldb2_y.value = []//getListCurMonth()
      res.rows.forEach(item => {
          kldb_y.value[item.month - 1] = item.genderg1
          kldb2_y.value[item.month - 1] = item.genderg2
      })
      kldbOpt.value.xAxis[0].data = kldb_x.value
      kldbOpt.value.xAxis[0].axisLabel.interval=0;
      kldbOpt.value.series[0].data = kldb_y.value
      kldb1Chart.setOption(kldbOpt.value)
      kldb2Opt.value.xAxis[0].data = kldb2_x.value
      kldb2Opt.value.xAxis[0].axisLabel.interval=0;
      kldb2Opt.value.series[0].data = kldb2_y.value
      kldb2Chart.setOption(kldb2Opt.value)
    }
  })
}
function getListCurMonth(){
  const now = new Date();
  // 获取当前年份
  const year = now.getFullYear();
  // 获取当前月份，注意月份是从0开始的，所以要+1
  const month = now.getMonth() + 1;
  let arrs=[]
  for (let index = 0; index < month; index++) {
    arrs.push(null);
  }
  return arrs;
}
function getCurrentMonthDaysArray() {
    // 获取当前日期
    const now = new Date();
    // 获取当前年份
    const year = now.getFullYear();
    // 获取当前月份，注意月份是从0开始的，所以要+1
    const month = now.getMonth() + 1;
    // 获取指定年份和月份的天数
    // 注意Date对象的第二个参数是月份（0-11），第三个参数是日期（1-31）
    // 创建一个指定月份的第一天，然后将日期设置为下个月的第一天，再减去1天即可得到当月的天数
    const daysInMonth = new Date(year, month, 0).getDate();
    // 创建一个长度为当前月份天数的数组，所有元素初始化为0
    const daysArray = Array.from({ length: daysInMonth }, () => 0);
    return daysArray;
}

async function getBydData(type) {
  let days = getCurrentMonthDaysArray()
  if (type == 0) {
    kldb_x.value=[]
    for (let index = 0; index < days.length; index++) {
      kldb_x.value.push((index+1)+'日')
    }
    kldb_y.value = days
  }else if (type == 1) {
    kldb2_x.value=[]
    for (let index = 0; index < days.length; index++) {
      kldb2_x.value.push((index+1)+'日')
    }
    kldb2_y.value = days
  }else{
    kldb_x.value=[]
    kldb2_x.value=[]
    for (let index = 0; index < days.length; index++) {
      kldb_x.value.push((index+1)+'日')
      kldb2_x.value.push((index+1)+'日')
    }
    kldb_y.value = days
    kldb2_y.value = days
  }

  const params = { compId: "", areaId: areaId.value }
  ajaxRequest('post', 'getBydData', params).then(res => {
    if (type == 0) {
      kldb_y.value = []//getListDays()
      res.rows.forEach(item => {
          kldb_y.value[item.day - 1] = item.genderg1
      })
      kldbOpt.value.xAxis[0].data = kldb_x.value
      kldbOpt.value.xAxis[0].axisLabel.interval=1;
      kldbOpt.value.series[0].data = kldb_y.value
      kldb1Chart.setOption(kldbOpt.value)
    } else if (type == 1) {
      kldb2_y.value = []//getListDays()
      res.rows.forEach(item => {
          kldb2_y.value[item.day - 1] = item.genderg2
      })
      kldb2Opt.value.xAxis[0].data = kldb2_x.value
      kldb2Opt.value.xAxis[0].axisLabel.interval=1;
      kldb2Opt.value.series[0].data = kldb2_y.value
      kldb2Chart.setOption(kldb2Opt.value)
    } else {
      kldb_y.value = []//getListDays()
      kldb2_y.value = []//getListDays()
      res.rows.forEach(item => {
          kldb_y.value[item.day - 1] = item.genderg1
          kldb2_y.value[item.day - 1] = item.genderg2
      })
      kldbOpt.value.xAxis[0].data = kldb_x.value
      kldbOpt.value.xAxis[0].axisLabel.interval=1;
      kldbOpt.value.series[0].data = kldb_y.value
      kldb1Chart.setOption(kldbOpt.value)
      kldb2Opt.value.xAxis[0].data = kldb2_x.value
      kldb2Opt.value.xAxis[0].axisLabel.interval=1;
      kldb2Opt.value.series[0].data = kldb2_y.value
      kldb2Chart.setOption(kldb2Opt.value)
    }
  })
}
function getListDays(){
  const now = new Date();
    // 获取当前年份
    const year = now.getFullYear();
    // 获取当前月份，注意月份是从0开始的，所以要+1
    const month = now.getMonth() + 1;
    // 获取指定年份和月份的天数
    // 注意Date对象的第二个参数是月份（0-11），第三个参数是日期（1-31）
    // 创建一个指定月份的第一天，然后将日期设置为下个月的第一天，再减去1天即可得到当月的天数
    const day = now.getDate();
    let arrs=[]
    for (let index = 0; index < day; index++) {
      arrs.push(0);
    }
    return arrs;
}
async function getDtData(type) {
 
  if (type == 0) {
    kldb_x.value=[
        '00:00','01:00','02:00','03:00','04:00','05:00','06:00','07:00','08:00','09:00','10:00','11:00',
        '12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00','20:00','21:00','22:00','23:00'
      ]
    kldb_y.value=[]
  }else if (type == 1) {
    kldb2_x.value=[
        '00:00','01:00','02:00','03:00','04:00','05:00','06:00','07:00','08:00','09:00','10:00','11:00',
        '12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00','20:00','21:00','22:00','23:00'
      ]
    kldb2_y.value=[]
  }else{
    kldb_x.value=[
        '00:00','01:00','02:00','03:00','04:00','05:00','06:00','07:00','08:00','09:00','10:00','11:00',
        '12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00','20:00','21:00','22:00','23:00'
      ]
    kldb2_x.value=[
        '00:00','01:00','02:00','03:00','04:00','05:00','06:00','07:00','08:00','09:00','10:00','11:00',
        '12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00','20:00','21:00','22:00','23:00'
      ]
    kldb_y.value=[]
    kldb2_y.value=[]
  }
  const params = { compId: "", areaId: areaId.value }
  ajaxRequest('post', 'getDtData', params).then(res => {
      if (type == 0) {
        kldb_y.value = []//getListCurHour();
        res.rows.forEach(item => {
          let str = item.hour_slot;
          let hour = Number(str.split(" ")[1].split(":")[0]);
          kldb_y.value[hour] = item.genderg1
        })
        kldbOpt.value.xAxis[0].data = kldb_x.value
        kldbOpt.value.xAxis[0].axisLabel.interval=1;
        kldbOpt.value.series[0].data = kldb_y.value
        kldb1Chart.setOption(kldbOpt.value)
      } else if (type == 1) {
        kldb2_y.value = []//getListCurHour();
        res.rows.forEach(item => {
          let str = item.hour_slot;
          let hour = Number(str.split(" ")[1].split(":")[0]);
          kldb2_y.value[hour] = item.genderg2
        })
        kldb2Opt.value.xAxis[0].data = kldb2_x.value
        kldb2Opt.value.xAxis[0].axisLabel.interval=1;
        kldb2Opt.value.series[0].data = kldb2_y.value
        kldb2Chart.setOption(kldb2Opt.value)
      } else {
        kldb_y.value = []//getListCurHour();
        kldb2_y.value = []//getListCurHour();
        res.rows.forEach(item => {
          let str = item.hour_slot;
          let hour = Number(str.split(" ")[1].split(":")[0]);
          kldb_y.value[hour] = item.genderg1
          kldb2_y.value[hour] = item.genderg2
        })
        kldbOpt.value.xAxis[0].data = kldb_x.value
        kldbOpt.value.xAxis[0].axisLabel.interval=1;
        kldbOpt.value.series[0].data = kldb_y.value
        kldb1Chart.setOption(kldbOpt.value)
        kldb2Opt.value.xAxis[0].data = kldb2_x.value
        kldb2Opt.value.xAxis[0].axisLabel.interval=1;
        kldb2Opt.value.series[0].data = kldb2_y.value
        kldb2Chart.setOption(kldb2Opt.value)
      }
  })
}
function getListCurHour(){
  let now = new Date();
  let hourIndex = now.getHours();
  let arrs = [];
  for (let index = 0; index <= hourIndex; index++) {
    arrs.push(0);
  }
  return arrs;
}
async function getDtklzbData(type) {
  const params = {
    compId: "", areaId: areaId.value
  }
  manflow.value.count = 0
  manflow.value.increase = 0
  womenflow.value.count = 0
  womenflow.value.increase = 0
  ajaxRequest('post', 'getDtklzbData', params).then(res => {
    if(res.rows||res.rows.length>0){
          res.rows.forEach(function (item) {
              if (item.type == 0) {
                if(item.today_count) manflow.value.count = item.today_count
                // manflow.value.increase = item.increase_percentage
              } else {
                if(item.today_count) womenflow.value.count = item.today_count
                // womenflow.value.increase = item.increase_percentage
              }
          });
      }
      carFlowOptions.value.carFlowNum=(manflow.value.count+womenflow.value.count)+''
  })
}
async function getDtcssyData(type) {
  const params = {
    compId: "",
    areaId: areaId.value
  }
  ajaxRequest('post', 'getDtcssyData', params).then(res => {
      if(!res.rows||res.rows.length<=0){
          datas.stopValue = 0
          datas.totalValue = 0
          datas2.stopValue = 0
          datas2.totalValue = 0
      }else{
          res.rows.forEach(function (item) {
              if (item.type == 0) {
                datas.stopValue = item.wsysl||item.total
                datas.stopValue=datas.stopValue<0?0:datas.stopValue
                datas.totalValue = item.total

              } else {
                datas2.stopValue = item.wsysl||item.total
                datas2.stopValue=datas2.stopValue<0?0:datas2.stopValue
                datas2.totalValue = item.total
              }
          });
      }
      zcwOpt.value.title.text = '总厕位：' + datas.totalValue,
      zcwOpt.value.graphic[0].style.text = datas.stopValue+'\n未使用'
      zcwChart.setOption(zcwOpt.value)
      zcwRightOpt.value.title.text = '总厕位：' + datas2.totalValue,
      zcwRightOpt.value.graphic[0].style.text = datas2.stopValue+'\n未使用'
      zcwRightChart.setOption(zcwRightOpt.value)
    })
}
async function getEnvData() {
  const params = {
    compId: "",
    areaId: areaId.value
  }
  ajaxRequest('post', 'getEnvData', params).then(res => {
      if(res.rows||res.rows.length>0){
        res.rows.forEach(function (item) {
              if (item.type == 0) {
                // 温度
                envList.value[0].value = (item.temperature||26.3)+'℃'
                // 湿度
                envList.value[1].value = (item.humidity||72.10)+'%'
                // 气味浓度
                if(item.odorconcentration==0){
                  envList.value[2].value = 0.01+'mg/m³'
                }else{
                  envList.value[2].value = ((item.odorconcentration)).toFixed(2)+'mg/m³'
                }
                mankqzl.value = getCnByOdorconcentration(item.odorconcentration)
              } else {
                // 温度
                env2List.value[0].value = (item.temperature||26.3)+'℃'
                // 湿度
                env2List.value[1].value = (item.humidity||72.10)+'%'
                // 气味浓度
                if(item.odorconcentration==0){
                  env2List.value[2].value = 0.01+'mg/m³'
                }else{
                  env2List.value[2].value = ((item.odorconcentration)).toFixed(2)+'mg/m³'
                }
                womenkqzl.value = getCnByOdorconcentration(item.odorconcentration)
              }
          });
      }
    })
}
function getCnByOdorconcentration(odorconcentration){
  if (odorconcentration <0.2 ) {
    return "优";
  } else if (odorconcentration >=0.2  && odorconcentration <1.5) {
    return  "良";
  } else if(odorconcentration >=1.5 ) {
    return "差";
  }
}
async function getToiletStatus() {
  const params = {
    compId: "",
    areaId: areaId.value
  }
  ajaxRequest('post', 'getToiletStatus', params).then(res => {
      if(res.rows||res.rows.length>0){
        res.rows.forEach(function (item) {
              if (item.type == 0) {
                //0=关1=开2=自动
                if(item.fancontrolmode==0){
                  fsItems.value[0].selected = false
                  fsItems.value[1].selected = true
                  fsItems.value[2].selected = false
                }else if(item.fancontrolmode==1){
                  fsItems.value[0].selected = true
                  fsItems.value[1].selected = false
                  fsItems.value[2].selected = false
                }else{
                  fsItems.value[0].selected = false
                  fsItems.value[1].selected = false
                  fsItems.value[2].selected = true
                }
                envList.value[4].value = item.fanstatus==0?'关':'开';
              } else {
                //0=关1=开2=自动
                if(item.fancontrolmode==0){
                  fs2Items.value[0].selected = false
                  fs2Items.value[1].selected = true
                  fs2Items.value[2].selected = false
                }else if(item.fancontrolmode==1){
                  fs2Items.value[0].selected = true
                  fs2Items.value[1].selected = false
                  fs2Items.value[2].selected = false
                }else{
                  fs2Items.value[0].selected = false
                  fs2Items.value[1].selected = false
                  fs2Items.value[2].selected = true
                }
                env2List.value[4].value = item.fanstatus==0?'关':'开';
              }
          });
      }
    })
}
async function getToiletPapermStatus() {
  const params = {
    compId: "",
    areaId: areaId.value
  }
  ajaxRequest('post', 'getToiletPapermStatus', params).then(res => {
      if(res.rows||res.rows.length>0){
        res.rows.forEach(function (item) {
              if (item.type == 0) {
                // 缺纸
                if(item.paperstatus==0||!item.paperstatus){
                  envList.value[3].label = '充足'
                }else{
                  envList.value[3].label = '有纸'
                }
              } else {
                // 缺纸
                if(item.paperstatus==0||!item.paperstatus){
                  env2List.value[3].label = '充足'
                }else{
                  env2List.value[3].label = '有纸'
                }
              }
          });
      }
    })
}
async function swithcnFan(type,sw) {
  let tcode
  if(areaId.value=='1177351'){//北区
    if(type=='man'){
      tcode='D01'
    }else{
      tcode='D02'
    }
  }else{//南区
    if(type=='man'){
      tcode='D03'
    }else{
      tcode='D04'
    }
  }
  const params = {
    toiletcode: tcode,
    switch:sw
  }
  ajaxRequest('post', 'swithcnFan', params).then(res => {
    if(!res.rows||res.rows.length<=0){
        // if(sw==2){//
        //   if(type=='man'){
        //     envList.value[4].value=''
        //   }else{
        //     envList.value[4].value=''
        //   }
        // }
      }
  })
}

const queryParams = new URLSearchParams(window.location); // 解析URL查询参数  
const ip = queryParams.get('hostname'); // 假设IP地址是通过查询参数传递的  
const baseURL = process.env.VITE_BASE_URL;
const aSvgIdMap =ref({})
const bSvgIdMap =ref({})
async function loadSvgIdMap( area ){
  const response = await fetch(baseURL+"config/toilet/"+ip+area+".json");  
  if (!response.ok) {  
    throw new Error('Failed to fetch SVG file');  
  } 
  let ret = await response.json()
  if(area=='A'){
    aSvgIdMap.value = ret
  }else{
    bSvgIdMap.value = ret
  }
}
loadSvgIdMap('A')
loadSvgIdMap('B')
const fansShow =ref({
  "1177350":{man:true,women:true},
  "1177351":{man:true,women:true}
})
async function loadFaniConfig(){
  const response = await fetch(baseURL+"config/toilet/conf.json");  
  if (!response.ok) {  
    return;
  } 
  let ret = await response.json()
  fansShow.value = ret.fansShow
  setToiletFanShow()
}
loadFaniConfig()
function setToiletFanShow(){
  let item = fansShow.value[areaId.value]
  // 男
  envList.value[4].showFlag= item.man
  envList.value[5].showFlag= item.man
  // 女
  env2List.value[4].showFlag= item.women
  env2List.value[5].showFlag= item.women
}
//有可能要实时刷新厕位状态 所以取数逻辑暂时放在组件里
async function getStatoiletseatData(areacode) {
  // $("#01-08-1").css("display", "block" )
  // $("#01-08-0").css("display", "none" )
  // $("#01-09-1").css("display", "block" )
  // $("#01-09-0").css("display", "none" )
  ajaxRequest('post', 'getStatoiletseatData', {areacode:areacode }).then(res => {
    if(res.rows){
      res.rows.forEach(item => {
        let id = item.areacode+"-" + item.pnum
        let idMap = areacode=='01'?aSvgIdMap:bSvgIdMap
        let v = idMap.value[id]
        if(idMap.value[id]){
          $("#"+idMap.value[id] + "-1").css("display",item.pvalue == 1 ? "none" : "block" )
          $("#"+idMap.value[id] + "-2").css("display",item.pvalue == 1 ? "block" : "none" )
        }else{
          $("#"+item.areacode+"-" + item.pnum + "-1").css("display",item.pvalue == 1 ? "none" : "block" )
          $("#"+item.areacode+"-" + item.pnum + "-2").css("display",item.pvalue == 1 ? "block" : "none" )
        }
      })
    }
  })
}
function handleDataLoadedA() {  
  getStatoiletseatData('01')
}
function handleDataLoadedB() { 
  getStatoiletseatData('02')
}


// 判断是否需要交换
const shouldSwap = computed(() => {
  const specialIPs = ['13.81.7.242','13.81.50.242']; // 男女互换位置
  return specialIPs.includes(ip);
});
</script>
<style scoped>
.svg-content{
  display: flex;
  justify-content: center;
  padding: 0vh;
  img{
    height: 100%;
  }
}

@media screen and (max-width: 1500px) {
  .svg-content{
    img{
      width: 100%;
    }
  }
}

.toilet-main{
  width: 80%;
  margin: 0 auto;
  display: flex;
  .toilet-item5{
    width: 50%;
    .toilet-top{
      display: flex;
      justify-content: center;
      padding: 4vh 0 3vh;
      .man{
        background: url("../assets/img/toilet/man.png") no-repeat;
        background-size: 100% 100%;
        height: 8vh;
        width: 4vh;
      }
      .women{
        background: url("../assets/img/toilet/women.png") no-repeat;
        background-size: 100% 100%;
        height: 8vh;
        width: 4vh;
      }
      .toilet-p{
        display: flex;
        justify-content: center;
        font-size: 2.6vh;
        padding-top: 2vh;
        padding-bottom: 1vh;
        color: #82f3d0;
      }
      .toilet-rate{
        display: flex;
        justify-content: center;
        font-size: 1.4vh;
        color: #cccccc;
        padding: 0 2vh;
      }
    }
    .toilet-bottom{
      display: flex;
      justify-content: center;
      .toilet-line{
        color: #cccccc;
        .b{
          font-size: 3vh;
          padding: 0 2vh;
          color: #82f3d0;
        }
      }
    }
  }
  .toilet-item6{
    width: 60%;
  }
  .toilet-item4{
    width: 40%;
  }
}

.toilet-items{
  padding: 5%;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  .toilet-item{
    width: 33%;
    display: flex;
    justify-content: center;
    padding: 1vh;
    .toilet-item-main{
      width: 100%;
      position: relative;
      background: rgba(0, 234, 255, 0.1);
      border: 2px solid rgba(0, 234, 255, 0.2);
      box-shadow: inset 0 0 14px 6px rgba(0, 234, 255, 0.1);
      align-content: center;
      border-radius: 6px;
      display: flex;
      justify-content: center;
      .toilet-img{
        height: 100%;
        display: flex;
        align-content: center;
        flex-wrap: wrap;
      }
      .wd{
        position: relative;
        background: url("../assets/img/toilet/温度.png") no-repeat;
        background-size: 80%;
        width: 3vh;
        height: 3vh;
      }
      .sd{
        position: relative;
        background: url("../assets/img/toilet/湿度.png") no-repeat;
        background-size: 80%;
        width: 3vh;
        height: 3vh;
      }
      .nh{
        position: relative;
        background: url("../assets/img/toilet/氨气.png") no-repeat;
        background-size: 80%;
        width: 3vh;
        height: 3vh;
      }
      .hs{
        position: relative;
        top: 2.3vh;
        background: url("../assets/img/toilet/硫化氢.png") no-repeat;
        background-size: 80%;
        width: 3vh;
      }
      .voc{
        position: relative;
        background: url("../assets/img/toilet/voc.png") no-repeat;
        background-size: 80%;
        width: 3vh;
        height: 3vh;
      }
      .qz{
        position: relative;
        background: url("../assets/img/toilet/纸巾盒.png") no-repeat;
        background-size: 80%;
        width: 3vh;
        height: 3vh;
      }
      .fskz{
        position: relative;
        background: url("../assets/img/toilet/风扇控制.png") no-repeat;
        background-size: 80%;
        width: 3vh;
        height: 3vh;
      }
      .fs{
        position: relative;
        background: url("../assets/img/toilet/风扇.png") no-repeat;
        background-size: 80%;
        width: 3vh;
        height: 3vh;
      }

      .toilet-icon-text{
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: center;;
        line-height: 2vh;
        .toilet-icon-text-value{
          font-size: 1.4vh;
          color: #35CB9C;
        }
        .toilet-icon-text-zh{
          font-size: 1.2vh;
        }
      }
    }
  }
}
.yz-common-title-navs {
  display: flex;
  position: absolute;
  font-size: 12px;
  right: 1.4vh;
  top: 1.5vh;
  z-index: 1000;
  .yz-common-title-nav {
    color: #ffffff;
    cursor: pointer;
    font-style: normal;
    span{
      background: transparent;
      padding: 2px 8px;
    }
  }
  .yz-common-title-nav:last-of-type {
    border-right: none;
  }
  .yz-common-title-nav.selected {
    span{
      background: #3DBDC8;
      padding: 2px 8px;
      border-radius: 3px;
    }
  }
}
.yz-select-server{
  height: 4.5vh;
}

.yz-box-items-small{
  height: 2vh;
  .yz-box-item-text {
    width: 26px;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1vh;
  }
}
.content {
  display: flex;
}
.content_info{
  padding-top: 40px;
}

.left-content { order: 1; } /* 左侧内容 */
.content_map { order: 2; }                 /* 中间地图 */
.right-content { order: 3; } /* 右侧内容 */

/* 交换布局时的排序：右-中-左 */
.swap-left { order: 3 !important; }  /* 原左边移到右侧 */
.swap-right { order: 1 !important; } /* 原右边移到左侧 */

/* 新增固定左上角的样式 */
.fixed-left {
  position: fixed;
  top: 72px;
  left: 10px;
  z-index: 1000; /* 确保覆盖其他内容 */
  width: 100px; /* 根据实际需求调整宽度 */
  height: auto;
  padding: 10px;
  color: white;
}


</style>